<template>
	<view class="tb-custom" :style="{ height: (height + 'px') }">
		<view class="cu-bar" :style="style" :class="[props.bgImage !== '' ? 'none-bg text-white bg-img' : '']">
			<block v-if="showBack">
				<view v-if="props.isBack" class="left" @tap="backPage">
					<text class="text-xl" :class="state.isLast?'cuIcon-home':'cuIcon-back'" :style="[{color:props.color}]"></text>
					<slot name="backText" />
				</view>
				<view v-else class="left">
					<slot name="left" />
				</view>
			</block>
			<view class="flex-sub" :style="[{ top: 10 + 'px', textAlign:props.textLeft,paddingLeft:props.paddinLeft}]">
				<view class="fontSizeTitle" :style="[{color:props.color}]">
          <text v-if="title">{{title}}</text>  
        </view>
				<slot name="content" />
			</view>
			<view class="right">
				<slot name="right" />
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { computed, onMounted, reactive } from 'vue';
	// import mHelper from '@/utils/helper';
	// import mRouter from "@/utils/routerUtil";

	let state = reactive({
		statusBar: 0,
		customBar: 0,
		isLast: false
	});
	let emit = defineEmits([
	  "change"
	]);
	const onChange = (obj:AnyObject) => {
		emit('change', obj)
	};
	
	onMounted(() => {
		const pages = getCurrentPages();
		state.isLast = pages.length <= 1
		const deviceInfo = uni.getDeviceInfo()
		const systemSetting = uni.getSystemSetting()
		const windowInfo = uni.getWindowInfo()
		let e={...deviceInfo,...systemSetting,...windowInfo}
		// #ifndef MP
		state.statusBar = Number(e.statusBarHeight);
		if (e.platform == 'android') {
			state.customBar = Number(e.statusBarHeight) + 50;
		} else {
			state.customBar = Number(e.statusBarHeight) + 45;
		}
		// #endif
		// #ifdef MP-WEIXIN
		state.statusBar = Number(e.statusBarHeight);
		let custom = wx.getMenuButtonBoundingClientRect();
		state.customBar = custom.bottom + custom.top - Number(e.statusBarHeight);
		// #endif
		// #ifdef MP-ALIPAY
		// state.statusBar = Number(e.statusBarHeight);
		// state.customBar = Number(e.statusBarHeight) + Number(e.titleBarHeight);
		// #endif
		console.log('height+++',state.customBar);
		onChange({height:state.customBar})
		// uni.getSystemInfo({
		// 	success: function (e) {
		// 		// #ifndef MP
		// 		state.statusBar = Number(e.statusBarHeight);
		// 		if (e.platform == 'android') {
		// 			state.customBar = Number(e.statusBarHeight) + 50;
		// 		} else {
		// 			state.customBar = Number(e.statusBarHeight) + 45;
		// 		}
		// 		// #endif
		// 		// #ifdef MP-WEIXIN
		// 		state.statusBar = Number(e.statusBarHeight);
		// 		let custom = wx.getMenuButtonBoundingClientRect();
		// 		state.customBar = custom.bottom + custom.top - Number(e.statusBarHeight);
		// 		// #endif
		// 		// #ifdef MP-ALIPAY
		// 		state.statusBar = Number(e.statusBarHeight);
		// 		state.customBar = Number(e.statusBarHeight) + Number(e.titleBarHeight);
		// 		// #endif
		// 		console.log('height+++',state.customBar);
		// 		onChange({height:state.customBar})
		// 	}
		// });
	});

	const props = defineProps({
		bgColor: {
			type: String,
			default: '#fff'
		},
    textLeft:{
      type: String,
      default: 'center'
    },
    paddinLeft:{
      type: String,
      default: '0rpx'
    },
		position: {
			type: String,
			default: 'fixed'
		},
		showBack: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: '#333'
		},
		isBack: {
			type: [Boolean, String],
			default: true
		},
		bgImage: {
			type: String,
			default: ''
		},
		height: {
			type: [Number, String],
			default: 44
		},
		delta: {
			type: Number,
			default: 1
		},
		title: {
			type: String,
			default: ''
		},
    name : {
      type: String,
      default: ''
    },
    titleDdx:{
      type: String,
      default: ''
    }
	});

	const style = computed(() => {
		let style = `height:${props.height}px;padding-top:${state.statusBar}px;`;
		if (props.bgColor) {
			style = `${style}background:${props.bgColor};`;
		}
    // if (props.paddinLeft) {
    // 	style = `${style}padding-left:${props.paddinLeft};`;
    // }
    // if (props.textLeft) {
    // 	style = `${style} text-align:${props.bgColor};`;
    // }
		if (props.bgImage) {
			style = `${style}background-image:url(${props.bgImage});`;
		}
		return style;
	});

	const backPage = () => {
		//判断是否有上一页 外部进入没有上一页 直接回到首页
		// eslint-disable-next-line no-undef
		const pages = getCurrentPages();
		if (pages.length <= 1) {
			// mHelper.toast('单页面栈'+ pages.length)
			uni.switchTab({ url: '/pages/index/home/home' })
		} else {
			uni.navigateBack({delta:props.delta})
			// mRouter.back();
		}
	};
</script>
<style lang="scss" scoped>
  .textfont{
    color: #333;
    font-family: "Microsoft YaHei UI";
    font-size: 36rpx;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .diand{
    font-size: 34rpx;
    font-weight: 700;
  }
	.tb-custom {
		width: 100%;
		top: 0;
		z-index: 999;
		left: 0;
	}
  .fontSizeTitle{
    
  }
	.tb-custom .cu-bar .content {
		width: calc(100% - 440rpx);
	}

	.tb-custom .cu-bar {
		min-height: 0;
		box-shadow: 0rpx 0rpx 0rpx;
		z-index: 9999;
		display: flex;
		align-items: center;

		.left {
			cursor: pointer;
			position: absolute;
			left: 0; //20
			padding: 10rpx 80rpx 10rpx 20rpx;
		}

		.right {
			position: absolute;
			right: 20rpx;
		}
	}
</style>